<template>
  <div class="device-basic-info-container">
    <template v-if="details.name">
      <div class="basic-info-top">
        <div class="basic-name-status">
          <div class="basic-name">{{ details.name }}</div>
          <div
            class="basic-status color-deep-gray"
            v-if="details.status === 1"
          >
            <i class="iconfont iconlixian"></i>
            <span>离线</span>
          </div>
          <div
            class="basic-status color-green"
            v-if="details.status === 2"
          >
            <i class="iconfont iconzaixian"></i>
            <span>在线</span>
          </div>
          <div
            class="basic-status color-red"
            v-if="details.status === 4"
          >
            <i class="iconfont iconyubaojing"></i>
            <span>报警</span>
          </div>
        </div>
        <div class="basic-img">
          <img
            :src="details.photo"
            v-if="details.photo"
          >
          <img
            class="no-data-img"
            src="@/assets/images/device_default.png"
            v-else
          >
        </div>
        <div class="device-num-category">
          <div class="device-num">
            <span>设备编号：</span>
            {{ details.number }}
          </div>
          <span class="device-category">{{ coverGroup(details.topid) }}</span>
        </div>
        <div class="device-model-scada">
          <div class="device-model">
            <span>物模型：</span>
            {{ details.model_name }}
          </div>
          <span
            class="device-scada"
            v-if="deviceScada"
            v-has="'deviceCenter:deviceManage:list:detail:basicInfo:checkScada'"
            @click="jumpView"
          >查看设备组态</span>
        </div>
      </div>

      <div class="basic-info-bottom">
        <p class="basic-into-title">设备信息</p>
        <ul class="basic-info-wrapper">
          <li>
            <span class="tag-name">产线识别号</span>
            <span class="tag-content">{{ details.identificationNumber }}</span>
          </li>
          <li>
            <span class="tag-name">通讯协议</span>
            <span class="tag-content">{{ details.protocol }}</span>
          </li>
          <li>
            <span class="tag-name">设备来源</span>
            <span class="tag-content">{{ details.from === 1 ? '自制' : '外协' }}</span>
          </li>
          <li>
            <span class="tag-name">产线编号</span>
            <span class="tag-content">{{ details.productLine }}</span>
          </li>
          <li>
            <span class="tag-name">网关编号</span>
            <span class="tag-content">{{ details.gatewayNo }}</span>
          </li>
          <li>
            <span class="tag-name">经度</span>
            <span class="tag-content">{{ details.longitude}}</span>
          </li>
          <li>
            <span class="tag-name">纬度</span>
            <span class="tag-content">{{ details.latitude}}</span>
          </li>
          <li>
            <span class="tag-name">设备地址</span>
            <span class="tag-content">{{ details.address }}</span>
          </li>
          <li>
            <span class="tag-name">参与项目</span>
            <div class="tag-content product-name">
              <p
                v-for="(item, index) in details.project"
                :key="index"
              >{{ item }}</p>
            </div>
          </li>
          <li>
            <span class="tag-name">质保期</span>
            <span class="tag-content">{{ details.warrantyTime }}</span>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import { getDeviceDetail, getDeviceScada } from '@/api/deviceManage.js';

export default {
  name: 'DeviceBasicInfo',
  data() {
    return {
      details: {},
      deviceScada: '',
      deviceScadaUrl: ''
    };
  },
  created() {
    console.log('DeviceBasicInfo');
    this.getDeviceDetail();
  },
  methods: {
    // 获取设备详情
    getDeviceDetail() {
      getDeviceDetail({
        id: this.$route.query.id
      })
        .then(res => {
          this.details = res.data;
        })
        .then(() => {
          this.getDeviceScada();
        });
    },
    // 获取设备组态
    getDeviceScada() {
      getDeviceScada({
        id: this.$route.query.modelId
      }).then(res => {
        this.deviceScada = res.data || '';
        if (this.deviceScada) {
          const SERVICE_URL = process.env.VUE_APP_BASE_ORIGIN;
          const { id } = this.$route.query;
          const token = localStorage.getItem('token');
          // 生成组态地址
          this.deviceScadaUrl = `${SERVICE_URL}/iot_device/internal/static/scada/runview.html?type=pc&deviceId=${id}&productId=${this.deviceScada.product_id}&scadaId=${this.deviceScada.ID}&token=${token}`;
        }
      });
    },
    // 转换分组id为文字
    coverGroup(topid) {
      // 1-搬运类 2-输送类 3-包装类 4-其他类
      let obj = {
        1: '搬运类',
        2: '输送类',
        3: '包装类',
        4: '其他类'
      };
      return obj[topid];
    },
    // 页面跳转
    jumpView() {
      this.$router.push({
        name: 'deviceScada',
        query: {
          url: this.deviceScadaUrl
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.device-basic-info-container {
  width: 100%;
  height: 100%;
  padding-bottom: 0.213333rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  .basic-info-top {
    width: 100%;
    margin-top: 0.213333rem;
    padding: 0.32rem 0.426667rem;
    background-color: #fff;

    .basic-name-status {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.213333rem;

      .basic-name {
        margin-right: 0.533333rem;
        font-size: 0.4rem;
      }

      .basic-status {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        font-size: 0.346667rem;

        i {
          margin-right: 0.053333rem;
        }
      }
    }

    .basic-img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 4.906667rem;
      margin-bottom: 0.213333rem;
      border: 1px solid #ebeef5;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;

        &.no-data-img {
          width: 4rem;
          height: 4rem;
        }
      }
    }

    .device-num-category {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.32rem;
      font-size: 0.373333rem;

      .device-num {
        flex-shrink: 0;
        margin-right: 0.266667rem;

        span {
          color: var(--color-gray);
        }
      }

      .device-category {
        padding: 0.053333rem 0.213333rem;
        font-size: 0.346667rem;
        color: var(--color-deep-gray);
        background-color: #f6f6f6;
        border-radius: 100em;
      }
    }

    .device-model-scada {
      display: flex;
      justify-content: space-between;
      font-size: 0.373333rem;

      .device-model {
        margin-right: 0.533333rem;
        span {
          color: var(--color-gray);
        }
      }

      .device-scada {
        flex-shrink: 0;
        color: var(--color-primary);
      }
    }
  }

  .basic-info-bottom {
    margin-top: 0.213333rem;

    .basic-into-title {
      position: relative;
      padding: 0.32rem 0.64rem;
      color: var(--color-primary);
      font-size: 0.373333rem;
      background-color: #fff;

      &::before {
        content: '';
        position: absolute;
        top: 0.346667rem;
        left: 0.426667rem;
        width: 0.053333rem;
        height: 0.32rem;
        background-color: var(--color-primary);
      }
    }

    .basic-info-wrapper {
      width: 100%;
      padding: 0 0.426667rem;
      background-color: #fff;

      li {
        display: flex;
        width: 100%;
        padding: 0.32rem 0;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.373333rem;

        &:last-of-type {
          border-bottom: 0;
        }

        .tag-name {
          flex-shrink: 0;
          width: 2.346667rem;
          padding-right: 0.426667rem;
          color: #999999;
        }

        .tag-content {
          flex: 1;
          color: #333333;

          &.product-name {
            color: var(--color-primary);

            p {
              margin-top: 0.213333rem;

              &:first-of-type {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>